<template>
  <div id="userMessageCheck">
    <h1 class="con-right-title">
      用户信息修改审核
    </h1>
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-check"
        @click="passWork"
        v-permission="'wh:userMessageCheck:adopt'"
      >
        通过
      </el-button>
      <el-button
        type="warning"
        icon="el-icon-close"
        plain
        @click="notPass"
        v-permission="'wh:userMessageCheck:noadopt'"
      >
        不通过
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <div class="table-box">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
        max-height="490"
        ref="table"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="selectAble"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="50" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column
          label="大鹏号"
          prop="dpAccount"
          width="110"
        ></el-table-column>
        <el-table-column
          label="用户名"
          prop="loginName"
          min-width="110"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.loginName">
              {{ scope.row.loginName }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="100" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.avatar">
              <listImgString
                :imgInfo="scope.row.avatar"
                :showNum="false"
              ></listImgString>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="个人签名"
          prop="motto"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.motto">
              {{ scope.row.motto }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="审核原因" prop="verifyItem" min-width="100">
          <template slot-scope="scope" v-if="scope.row.verifyItem">
            修改：<span style="color:#f00">{{ scope.row.verifyItem }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="提交时间"
          prop="submitTime"
          width="150"
        ></el-table-column>
        <el-table-column label="人工审核结果" prop="checkStatu" width="110">
          <template slot-scope="scope">
            <span
              v-if="scope.row.status"
              class="tag-span"
              :class="scope.row.status | filterClass('userMCheckStatus')"
              >{{ scope.row.status | filterName('userMCheckStatus') }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="审核人"
          prop="verifyUserName"
          width="80"
        ></el-table-column>
        <el-table-column
          label="人工审核时间"
          prop="verifyTime"
          width="140"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="190">
          <template slot-scope="scope">
            <el-button
              v-permission="'wh:userMessageCheck:adopt'"
              v-if="scope.row.status === 'PENDING'"
              type="text"
              @click="handlPassWork(scope.row)"
            >
              通过
            </el-button>
            <el-button
              v-permission="'wh:userMessageCheck:noadopt'"
              v-if="scope.row.status === 'PENDING'"
              type="text"
              @click="handlNotPassWord(scope.row)"
            >
              不通过
            </el-button>
            <span v-if="scope.row.status !== 'PENDING'">已审核</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 不通过/通过弹窗 -->
    <checkDialog
      :dialogData="checkDialogData"
      @passRequest="passRequest"
      @failRequest="failRequest"
    ></checkDialog>
  </div>
</template>

<script>
import topSearch from '@component/userMessageCheck/topSearch' // 上部搜索条件
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
import checkDialog from '@component/userMessageCheck/checkDialog' // 不通过理由弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  checkPass,
  checkUnPass,
  passMultAPI,
  notPassMultAPI
} from '@/api/userMessageCheck/index'
export default {
  name: 'check',
  msg: '用户信息修改审核',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    checkDialog,
    listImgString
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        dpAccount: '', //大鹏号
        order: '', // 待审核排序
        verifyStatus: '', // 人工审核状态
        verifyUserId: '', // 审核人
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      flag: false,
      checkDialogData: {
        isShow: false,
        params: '',
        type: ''
      },
      id: '',
      isDelete: false,
      multipleSelection: []
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          this.showContentList()
        } else {
          this.canShowPage = true
        }
      })
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let params = { ...this.searchParams, ...this.formInline }
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
          this.getPolivNum()
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 过滤返回评论内容 */
    getPatams(row) {
      let params = {
        content: row.content,
        dpAccount: row.dpAccount,
        submitTime: row.submitTime,
        type: row.type
      }
      return params
    },
    // 通过
    handlPassWork(row) {
      this.checkDialogData.params = row
      this.checkDialogData.type = 'pass'
      this.checkDialogData.isShow = true
    },
    // 通过请求
    passRequest(row) {
      /*console.log('通过请求')*/
      let params = this.getPatams(row)
      checkPass(
        row.userId,
        params,
        (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        },
        (response, statusCode) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          if (statusCode === 409) {
            //状态码409的时候，刷新页面
            this.searchList()
          }
        }
      )
    },
    /* 不通过*/
    handlNotPassWord(row) {
      this.checkDialogData.params = row
      this.checkDialogData.type = 'notPass'
      this.checkDialogData.isShow = true
    },
    /* 不通过请求 */
    failRequest(row) {
      /* console.log('不通过请求')*/
      let params = this.getPatams(row)
      checkUnPass(
        row.userId,
        params,
        (response) => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.searchList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /*获取选中的id*/
    getSelectIds() {
      let params = []
      this.multipleSelection.forEach((item) => {
        let { content, dpAccount, reason, submitTime, type, userId } = item
        params.push({
          content,
          dpAccount,
          reason,
          submitTime,
          type,
          userId
        })
      })
      return [...params]
    },
    // 批量通过
    passWork() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      if (this.multipleSelection.length > 10) {
        this.$message.warning('一次选择不超过10条数据！')
        return
      }
      this.$confirm(
        `确认通过选中的${this.multipleSelection.length}条用户信息吗？`,
        '确定提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let params = this.getSelectIds()
        passMultAPI(
          params,
          (response) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.searchList()
          },
          (response, statusCode) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
            if (statusCode === 409) {
              //状态码409的时候，刷新页面
              this.searchList()
            }
          }
        )
      })
    },
    /* 批量不通过 */
    notPass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      if (this.multipleSelection.length > 10) {
        this.$message.warning('一次选择不超过10条数据！')
        return
      }
      this.$confirm(
        `确认不通过选中的${this.multipleSelection.length}条用户信息吗？`,
        '确定提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let params = this.getSelectIds()
        notPassMultAPI(
          params,
          (response) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.searchList()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    // table选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectAble(row, index) {
      if (row.status === 'PENDING') {
        return true
      } else {
        return false
      }
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#userMessageCheck {
  @import url('~@common/style/imgBox.less');
  .table-box {
    width: 100%;
  }
  .el-table {
    width: 99.9% !important;
  }
  .textContent {
    cursor: pointer;
  }
  .text-overflow {
    .cell {
      /* max-height: 140px;*/
    }
  }
}
</style>
